<template>
  <div>
    <div class="list" id="list"></div>
    <div id="container"></div>
    <div>
      <el-button @click="endOrder">结束订单</el-button>
    </div>
  </div>
</template>
<script setup>
import { onUnmounted } from "vue";
import { useRoute } from "vue-router";
import AMapLoader from "@amap/amap-jsapi-loader";
import log from "@/views/monitor/job/log.vue";
import {updateByOrder} from "@/api/pickAirport/pickAirport.js";

const { proxy } = getCurrentInstance();

const title = ref("");
const route = useRoute();
const startAndEnd = ref({
  startPointLongitude: 121.317357,
  startPointLatitude: 31.194540,
  destinationLongitude: 121.806345,
  destinationLatitude: 31.150768
})


const data = reactive({
  form: {}
})

let map = null;
let marker = null;
const addr=ref({
  add: "",
  locatin:''
});

const clickHandler = function (e){
  console.log(e)
  addr.value.locatin = e.lnglat.getLng() + ',' + e.lnglat.getLat()
}

function endOrder(){
  var orderCard = route.query.orderCard;
  var strings = orderCard.split('_');
  if (strings[1]===1){

  }else if (strings[1]===2){
    updateByOrder(strings[0]).then(obj=>{
      if(obj.data===200){
        proxy.$modal.msgSuccess("订单已完成");
      }
    })
  }
}

function getLnglat(){
  console.log(route.query.start,)
  if (route.query.start!=null || route.query.start!= undefined){
    var start = route.query.start.split(',');
    startAndEnd.value.startPointLongitude = start[0]
    startAndEnd.value.startPointLatitude = start[1]
  }
  if (route.query.end!=null || route.query.end!= undefined){
    var end = route.query.end.split(',');
    startAndEnd.value.destinationLongitude = end[0]
    startAndEnd.value.destinationLatitude = end[1]
  }
  console.log(startAndEnd.value)
}

getLnglat()

function lodMap(){
  window._AMapSecurityConfig = {
    securityJsCode: "2be9a9b9a5ec953934d61b776a4fd2d5",
  };
  AMapLoader.load({
    key: "026ef6cc4bb68e803eb48d86fa63d92d", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    // center: [split[0],split[1]],
    // plugins: ['AMap.Scale','AMap.ToolBar','AMap.PlaceSearch','AMap.CitySearch','AMap.MapType'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  }).then((AMap) => {
    map = new AMap.Map('container', {
      // 设置地图容器id
      viewMode: "3D", // 是否为3D地图模式
      zoom: 17, // 初始化地图级别
      center: [121.696492,30.870378], // 初始化地图中心点位置
    });
    AMap.plugin(['AMap.ToolBar','AMap.Driving'], function () {
      //在回调函数中实例化插件，并使用插件功能
      map.addControl(new AMap.ToolBar())//缩放
      map.on("click",clickHandler);
      var driving = new AMap.Driving({
        map: map,
        panel: "list"
      });

      driving.search(
          new AMap.LngLat(startAndEnd.value.startPointLongitude,startAndEnd.value.startPointLatitude),
          new AMap.LngLat(startAndEnd.value.destinationLongitude,startAndEnd.value.destinationLatitude),
          function(status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
          console.log('绘制驾车路线完成')
        } else {
          console.log('获取驾车数据失败：' + result)
        }
      });
    });

    onUnmounted(() => {
      map?.destroy();
    });
  }).catch((e) => {
    console.log(e);
  });
}

lodMap();
</script>

<style scoped>
#container {
//position: relative;
  width: 70%;
  height: 800px;
  float: left;
}
.list {
  position: absolute;
  top: 150px;
  right: 700px;
  height: 500px;
  width: 340px;
  z-index: 999;
  font-size: 25px;
}

</style>